<nz-form-item class="w-100 mt-2" nz-row>
  <nz-form-label>When done, notify</nz-form-label>
  <nz-form-control class="control-hover">
    <div
      (nzVisibleChange)="handleMembersVisibleChange($event)" [nzClickHide]="false"
      [nzDropdownMenu]="membersDropdown"
      [nzTrigger]="'click'" class="task-form-assignee" nz-dropdown>
      <div class="d-flex h-100 align-items-center">
        <ng-container *ngIf="!loading">
          <worklenz-avatars *ngIf="subscribers.length" [names]="subscribers"
                            class="d-flex cursor-pointer"></worklenz-avatars>
          <span nz-typography nzType="secondary">
            <nz-avatar [nzSize]="28" class="avatar-dashed ms-1 bg-white" [nzIcon]="'plus'"></nz-avatar>
          </span>
        </ng-container>

        <nz-skeleton-element *ngIf="loading" nzType="input" [nzActive]="true" [nzSize]="'default'" style="width:200px"/>
      </div>

      <nz-dropdown-menu #membersDropdown="nzDropdownMenu">
        <ul *ngIf="members.length" class="members-dropdown pt-0" nz-menu>
          <li class="px-3 py-2 position-sticky top-0 bg-white z-top">
            <input [(ngModel)]="searchText" class="border-default-color dropdown-search-input"
                   nz-input placeholder="Search by name" type="text" #searchInput>
          </li>
          <li (nzCheckedChange)="handleMemberChange(item, $event)"
              *ngFor="let item of members | searchByName: searchText; trackBy: trackById"
              [(nzChecked)]="item.selected"
              [nzDisabled]="item.is_pending && !item.selected"
              class="m-0"
              [ngClass]="item.is_pending && !item.selected ? 'disable' : ''"
              nz-checkbox nz-menu-item>
            <div class="d-flex align-items-center justify-content-center user-select-none">
              <nz-avatar
                [nzSize]="32"
                [nzSrc]="item.avatar_url"
                [nzText]="item.name | firstCharUpper"
                [nzTooltipPlacement]="'top'"
                [nzTooltipTitle]="item.name"
                [style.background-color]="item.avatar_url ? '#ececec' : item.color_code"
                class="mt-auto mb-auto me-2"
                nz-tooltip></nz-avatar>
              <div style="line-height: 15px;">
                <span class="d-block" nz-typography>{{item.name}}</span>
                <small nz-typography nzType="secondary">
                  {{item.email}}
                  <small *ngIf="item.is_pending" nz-typography nzType="danger">(Pending Invitation)</small>
                </small>
              </div>
            </div>
          </li>
        </ul>
      </nz-dropdown-menu>
    </div>
  </nz-form-control>
</nz-form-item>
